/* eslint-disable react/jsx-pascal-case */
import React from 'react';
import cookie from 'react-cookies'
const Productindex = () => {
    let navigate = React.$router.useNavigate();
    // 关键字
    const [keywords, setKeywords] = React.useState('');
    // 列表
    const [list, setList] = React.useState([])
    const [finished, setfinished] = React.useState(false)
    const [loading, setloading] = React.useState(false)
    const [page, setPage] = React.useState(1)

     // 获取路由传参的方法
     let [searchParams] =React.$router.useSearchParams();
     // 获取路由传参的ID值
     const [action, setAction] = React.useState(searchParams.get('action'))

    const getIndexData = async () => {
        let data = {
            keywords: keywords,
            // page: page,
        };
        let result = await React.$api.productindex(data)
        if (result && result.code == 1) {
            setList(result.data)
            
        }
    }

    React.useEffect(() => {
        getIndexData()
    },[])

    // const onRefresh = async() => {
    //     setList([])
    //     setPage(1)
    //     setfinished(false)
    //     return new Promise(resolve => {
    //         setTimeout(() => {
    //             getIndexData()
    //             React.$Vant.Toast.info('刷新成功')
    //             resolve(true)
    //         }, 1000)
    //     })
    // }

    // const load = async () => {
    //     setfinished(true)
    //     setloading(true)
    //     await getIndexData()
    // }

    const SelectEvent = (item) =>{
        let data = {
            id: item.id,
            name: item.name,
            rent: item.rent,
            rent_price: item.rent_price
        }
        // 存取商品信息
        cookie.save('product', data)
        navigate('/business/lease/add')
    }

    const Items = () =>{
        if(action){
            return(
                list.map((item) => {
                    return (
                        <li key={item.id} onClick={() => SelectEvent(item)}>
                            <>
                                <img src={item.thumbs_text} alt="" />
                                <p>{item.name}</p>
                                <span>￥{item.rent_price}</span>
                            </>
                        </li>
                    )
                })
            )
        } else {
            return(
                list.map((item) => {
                    return (
                        <li key={item.id}>
                            <React.$router.NavLink to={`/business/product/info?pid=${item.id}`}>
                                <img src={item.thumbs_text} alt="" />
                                <p>{item.name}</p>
                                <span>￥{item.rent_price}</span>
                            </React.$router.NavLink>
                        </li>
                    )
                })
            )
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="商品大全"
                onClickLeft={() => navigate(-1)}
            />
            <React.$Vant.Search
                value={keywords}
                onChange={setKeywords}
                onSearch={getIndexData}
                placeholder="请输入商品名称"
            />
            <div className="left_kuangs">
                <ul>
                    {/* <React.$Vant.PullRefresh
                        onRefresh={onRefresh}
                    >
                        <React.$Vant.List finished={finished} onLoad={load} offset={5} loading={loading}> */}
                            <Items/>
                        {/* </React.$Vant.List>
                    </React.$Vant.PullRefresh> */}
                </ul>
            </div>
        </>
    )
}
export default Productindex;